<template>
	<view class="container">
		<view class="box">
			<view class="register_txt tac">
				个人实名认证
			</view>
			<view class="desc">认证信息将用于平台服务，与账号唯一绑定无法解除绑定。我们会对信息进行严格保密。</view>
			<u-form labelPosition="left" :model="ruleForm" :rules="rules" labelWidth="80" ref="uForm" class="uForm"
				:errorType="errorType" :labelStyle="labelStyle">
				<u-form-item label="" prop="account" borderBottom>
					<u-input v-model="ruleForm.account" placeholder="填写真实姓名" border="none">
					</u-input>
				</u-form-item>
				<u-form-item label="" prop="password" borderBottom>
					<u-input v-model="ruleForm.password" type="password" placeholder="填写身份证号" border="none">
					</u-input>
				</u-form-item>

				<view class="ubtn">
					<u-button type="primary" text="进入人脸识别" @click="submit"></u-button>
				</view>
			</u-form>
		</view>
		<view class="dis-flex flex-x-center agreement">
			<u-checkbox-group v-model="checked"><u-checkbox :name="true" activeColor="#000"
					shape="circle"></u-checkbox></u-checkbox-group>我已阅读并同意<text>《实名认证服务协议》</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'authentication', // 实名认证
	data() {
		return {
			checked: [false],
			ruleForm: {
				password: '',
				account: '',
			},
			errorType: 'toast',
			labelStyle: {
				color: '#6750F8',
			},
			rules: {
				account: [{
					required: true,
					message: '请输入账号',
					trigger: ['change', 'blur'],
				},
					// {
					// 	// 自定义验证函数，见上说明
					// 	validator: (rule, value, callback) => {
					// 		// 上面有说，返回true表示校验通过，返回false表示不通过
					// 		return uni.$u.test.mobile(value);
					// 	},
					// 	message: '手机号码不正确',
					// 	// 触发器可以同时用blur和change
					// 	trigger: ['change', 'blur'],
					// }
				],
				password: {
					type: 'string',
					required: true,
					message: '请输入密码',
					trigger: ['blur', 'change']
				}
			},
		}
	},
	onLoad() {

	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		radioChange(e) {
			console.log(e);
		},

		submit() {
			this.$refs.uForm.validate().then(res => {

			}).catch(errors => {
				console.log(errors)
			})

		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	background: #fff;

	.box {
		padding: 235rpx 100rpx 0;

		.register_txt {
			font-size: 42rpx;
			color: $uni-text-color;
			font-weight: bold;
		}

		.desc {
			margin-top: 45rpx;
			font-size: 26rpx;
			color: $uni-text-color-grey;
			line-height: 36rpx;
		}

		.uForm {
			margin-top: 100rpx;

			.ubtn {
				margin-top: 70rpx;

				/deep/ .u-button--primary {
					border-radius: 86rpx;
				}

			}
		}
	}

	.agreement {
		margin-top: 40rpx;

		text {
			color: $uni-text-color-inverse;
		}
	}
}
</style>